<template>
	<view class="p0-15">
		<uni-row :gutter="12">
			<uni-col :span="6" v-for="(item,index) in dataInfo" :key="index">
				<view class="mt10 tabs-item" :class="selectIndex == index ? 'tabs_' : 'tabs'" @click="onSelectType(index)">{{item.name}}</view>
			</uni-col>
		</uni-row>
		<view class="mt15">
			<view class="node" v-for="(e,i) in data" :key='i' v-if="e.name != '全部'">
				<uni-title type="h2" :title="e.name" align="center"></uni-title>
				<view class="grid">
					<view v-for="(item,index) in e.children" :key='item.id' @click="onLink('list/list',item.id)">
						<view class="text-center mt10"><image class="node-image" :src="item.images"></image></view>
						<text class="text">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form:{type:0},
				selectIndex:0,
				dataInfo:[],
				data:[]
			}
		},
		onShow() {
			this.onGetNodeType()
		},
		methods: {
			onGetNodeType(){
				let _this = this
				this.$request_api('applet_api/node/type','POST',_this.form).then(res => {
					_this.dataInfo = _this.mapType(res.data)
					_this.data = _this.mapType(res.data)
				}).catch(err => {
					console.log(err)
				})
			},
			onSelectType(index){
				this.selectIndex = index
				if(index == 0){
					this.data = this.dataInfo
					return
				}
				this.data = []
				this.data.push(this.dataInfo[index])
			},
			mapType(data){
				let obj = { name: '全部', id: 0 }
				data.unshift(obj)
				return data.map((item) => {
					item.text = item.name
					item.value = item.id
					return item
				});
			},
			onLink(url,id){
				uni.navigateTo({
					url: "/pages/node/"+url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.tabs-item{font-size: .8rem;}
.title{font-size: .9rem;color: #111;font-weight: 600;height: 40px;}
.company{font-size: .8rem;margin-top: 5px;}
.node{border-top: 1px solid #EEE;padding: 24px 0px;}
.node-image{width: 55px;height: 55px;}
.text {font-size: 14px;margin: 5px 5px 5px 5px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.grid{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;text-align: center;}
</style>
